本項目為一款小型遊戲的時間線任務設計，總共只包含八個問題，要針對不同螢幕尺寸進行適配，為了確保在大螢幕（如電腦）上的視覺效果，我們選擇將遊戲界面限制在手機尺寸，具體使用 iPhone SE 的 viewport 進行設計，遊戲面板寬度為 375 px。

切版時使用 Chrome DevTools 進行不同版面的模擬
Mobile 版本

Desktop 版本

重新認識不同網格系統

在設計領域，不同的問題需要不同的解決方案。數位設計強調靈活且有規則的排版，與平面設計有所不同。平面設計多用於印刷，其載體為紙質，因此尺寸固定。而數位設計則需要適應各種螢幕尺寸，具有高度的變動性。此外，數位設計還採用了 Fluid Grid 系統，允許在不同螢幕寬度下進行動態排版，例如文字和元件的自動換行。

不同設計排版比較

平面設計排版：

• 固定格式：主要為印刷用途，尺寸和格式固定。
• 高解析度：需要高解析度圖像以達到印刷品質。
• 色彩模式：通常使用 CMYK 色彩模式。
• 不可互動：作品是靜態的，無法進行互動。
• 成本與時間：印刷過程通常較費時和成本高。
• 紙張質感：紙質的選擇會影響最終作品。
• 排版限制：由於尺寸固定，需要精確地安排各元素。

數位設計排版：

• 靈活格式：可適應不同螢幕尺寸和解析度。
• 低解析度：通常不需要像印刷品那樣高的解析度。
• 色彩模式：主要使用 RGB 色彩模式。
• 可互動：允許使用者進行各種互動，如點擊和滾動。
• 成本與時間：通常更為經濟和快速。
• 多媒體元素：可加入視頻、音頻等互動元素。
• 排版靈活性：可進行動態調整，提供更多設計自由度。

重新認識斷點

我們可以參考 tailwind.css 的斷點配置，直接從前綴符號 prefix sm ，開始進行切版。但還是要看產品對於市場受眾的需求。

RWD 實務

• [Media Query](Using media queries)：使用 CSS 媒體查詢來適應不同的 viewport。
• Fluid Grid：使用百分比而非固定像素來設置元素寬度。
• RWD 圖片：確保圖片能根據不同螢幕尺寸進行縮放。
• 字體和間距：使用相對單位（如 em 或 rem）來設置字體大小和間距。
• 測試：在多種設備和瀏覽器上進行測試以確保兼容性。

參考資料

溫故知新 — 初探 Grid 網格
Responsive Web Design - Introduction